<template>
    <div class="container">


        <!-- 顶部按钮区域 -->
        <div class="header">
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small" label-width="80px">
                <el-form-item label="筛选">
                    <el-select v-model="formInline.region" placeholder="时间范围">
                        <el-option v-for="item in bmzhanghao" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>

                </el-form-item>
                <el-form-item label="日期">
                    <el-date-picker v-model="value1" type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-button class="search_button" type="primary" icon="el-icon-search" @click="onSearch">搜索</el-button>
                <el-button class="chongzhi_button" type="default" icon="el-icon-refresh" @click="onReset">重置</el-button>
            </el-form>
        </div>

        <div class="window-table">
            <el-table :data="tableData" style="width: 100%">
                <!-- 合并多个表头 -->
                <el-table-column label="部门" prop="window" width="80" align="center">
                    <el-table-column prop="window" label="窗口" width="80" align="center" />
                </el-table-column>

                <!-- 动态生成部门头 -->
                <el-table-column label="劳动监察" prop="laborInspection" width="80" align="center"></el-table-column>
                <el-table-column label="物业" prop="property" width="80" align="center"></el-table-column>
                <el-table-column label="公安" prop="police" width="80" align="center"></el-table-column>
                <el-table-column label="法院" prop="court" width="80" align="center"></el-table-column>
                <el-table-column label="司法" prop="judiciary" width="80" align="center"></el-table-column>
                <el-table-column label="劳动" prop="labor" width="80" align="center"></el-table-column>
                <el-table-column label="心理咨询" prop="psychologicalConsulting" width="80" align="center"></el-table-column>
                <el-table-column label="市场监管" prop="marketRegulation" width="80" align="center"></el-table-column>
                <el-table-column label="仲裁机构" prop="arbitration" width="80" align="center"></el-table-column>
                <el-table-column label="交通事故" prop="trafficAccident" width="80" align="center"></el-table-column>
                <el-table-column label="人民调解" prop="peopleMediation" width="80" align="center"></el-table-column>
                <el-table-column label="民政" prop="civilAffairs" width="80" align="center"></el-table-column>
                <el-table-column label="人力资源" prop="humanResources" width="80" align="center"></el-table-column>
                <el-table-column label="社会保障" prop="socialSecurity" width="80" align="center"></el-table-column>
                <el-table-column label="生态环境" prop="environment" width="80" align="center"></el-table-column>
                <el-table-column label="医疗纠纷" prop="medicalDisputes" width="80" align="center"></el-table-column>
                <el-table-column label="法律援助" prop="legalAssistance" width="80" align="center"></el-table-column>
                <el-table-column label="自然资源" prop="naturalResources" width="80" align="center"></el-table-column>
                <el-table-column label="卫生健康" prop="health" width="80" align="center"></el-table-column>
                <el-table-column label="消费者协会" prop="consumerAssociation" width="90" align="center"></el-table-column>
                <el-table-column label="商会" prop="chamberOfCommerce" width="80" align="center"></el-table-column>
            </el-table>
        </div>

        <!-- 分页区域 -->
        <div class="pagination-container">
            <el-pagination background @current-change="handlePageChange" :current-page="currentPage"
                :page-size="pageSize" :total="totalItems" layout="total, prev, pager, next"
                class="pagination"></el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [
                { window: '窗口1', laborInspection: 7, property: 26, police: 32, court: 59, judiciary: 7, labor: 26, psychologicalConsulting: 26, marketRegulation: 26, arbitration: 32, trafficAccident: 26, peopleMediation: 32, civilAffairs: 26, humanResources: 32, socialSecurity: 59, environment: 32, medicalDisputes: 59, legalAssistance: 22, naturalResources: 7, health: 7, consumerAssociation: 7, chamberOfCommerce: 7 },
                { window: '窗口2', laborInspection: 265, property: 65, police: 43, court: 13, judiciary: 265, labor: 65, psychologicalConsulting: 43, marketRegulation: 65, arbitration: 65, trafficAccident: 43, peopleMediation: 65, civilAffairs: 65, humanResources: 65, socialSecurity: 43, environment: 265, medicalDisputes: 43, legalAssistance: 265, naturalResources: 265, health: 265, consumerAssociation: 265, chamberOfCommerce: 265 },
                { window: '窗口3', laborInspection: 213, property: 213, police: 16, court: 29, judiciary: 213, labor: 213, psychologicalConsulting: 16, marketRegulation: 213, arbitration: 213, trafficAccident: 16, peopleMediation: 213, civilAffairs: 213, humanResources: 16, socialSecurity: 213, environment: 213, medicalDisputes: 16, legalAssistance: 213, naturalResources: 213, health: 16, consumerAssociation: 213, chamberOfCommerce: 213 },
                // 更多数据...
            ],
            activeName: "first" /* 头部tabs切换 */,
            pickerOptions2: {
                shortcuts: [
                    {
                        text: "最近一周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                ],
            },
            formInline: {
                user: "",
                region: "",
            },
            ruleForm: [],
            searchQuery1: "",
            searchQuery2: "",
            hover: false,
            currentPage: 1,
            pageSize: 7,
            totalItems: 2888,
            data: [
                {
                    serialNumber: "01",
                    registrationDate: "2024-11-21",
                    briefDescription: "某工人小摔伤",
                    name: "张三",
                    gender: "男",
                    contactPhone: "13987654321",
                    idCard: "4008001999001027789",
                    address: "高唐县姜店镇中心街 58号",
                    department: "物业部门",
                    handleStatus: "处理中",
                },
                // 示例数据...
            ],
            hoverStyle: {
                backgroundColor: "#e4f7ff",
                color: "#409eff",
            },
        };
    },
    methods: {
        /* 头部tabs切换 */
        handleClick() { },
        /* 搜索按钮 */
        onSearch() { },
        /* 重置按钮 */
        onReset() {
            this.searchQuery1 = "";
            this.searchQuery2 = "";
        },
        // 处理
        handleItem(row) {
            console.log("Handling item:", row);
        },
        // 删除
        deleteItem(row) {
            console.log("Deleting item:", row);
        },
        // 分页更改
        handlePageChange(page) {
            this.currentPage = page;
            console.log("Page changed to:", page);
        },
    },
};
</script>

<style scoped>
.container {
    margin: 20px 30px;
    font-family: "Arial", sans-serif;
}

.header {
    margin-bottom: 20px;
    background-color: #f4f7fa;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.button {
    font-size: 14px;
    padding: 8px 16px;
}

.search-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

.search-input {
    width: 200px;
    margin-right: 20px;
    border-radius: 4px;
}

.search-btn,
.reset-btn {
    padding: 8px 16px;
    font-size: 14px;
}

.search-btn {
    background-color: #409eff;
    color: white;
    margin-right: 10px;
}

.reset-btn {
    background-color: #f0f2f5;
    color: #333;
}

.process-btn {
    background-color: #409eff;
    color: white;
    margin-right: 5px;
    border-radius: 4px;
}

.delete-btn {
    background-color: #f56c6c;
    color: white;
    border-radius: 4px;
}

.el-table th {
    background-color: #f5f7fa;
    font-weight: bold;
}

.el-table td {
    font-size: 14px;
    line-height: 40px;
}

.el-table-row:hover {
    background-color: #f0f9ff;
}

.pagination {
    font-size: 14px;
}

.el-pagination__prev,
.el-pagination__next {
    background-color: #409eff;
    color: white;
}

.el-pagination__pager {
    color: #409eff;
}

.is-active {
    background-color: #fff !important;
}
</style>